.page-content{
	padding: $uni-spacing-col-base $uni-spacing-row-base;
	.container{
		.top-navbar{
			display: flex;
			align-items: center;
			justify-content: center;
			.title-recommend{
				font-size: $uni-font-size-lg;
				color: $uni-text-color;
				padding: $uni-spacing-col-sm 0;
				margin: 0 $uni-spacing-row-base;
			}
			.title-active{
				color: $gs-color-green;
				border-bottom: solid 1.8px $gs-color-green;
			}
		}
		.center-hot{
			background-color: $gs-jpBg;
			border-radius: 10px;
			padding: $uni-spacing-col-base $uni-spacing-row-lg;
			margin: $uni-spacing-col-base 0;
			.hot-content{
				.hotContent-item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: $uni-spacing-col-sm $uni-spacing-row-base;
					.hotItem-left{
						display: flex;
						.hot-Id{
							font-size: $gs-font-base;
							color: $uni-text-color-grey;
							font-weight: bold;
						}
						.hot-one{
							color: #FF5B32;
						}
						.hot-two{
							color: #EE7715;
						}
						.hot-three{
							color: #FCCB02;
						}
						.item-name{
							font-size: $uni-font-size-lg;
							color: $uni-text-color;
							padding: 0 $uni-spacing-row-sm;
							display: flex;
						}
					}
					.hotItem-right{
						font-size: $gs-font-sm;
						color: $uni-text-color-placeholder;
					}
				}
			}
		}
		.bottom-comment{
			background-color: $gs-jpBg;
			border-radius: 10px;
			padding: $uni-spacing-col-lg $uni-spacing-row-lg;
			margin: $uni-spacing-col-base 0;
			.empty-box{
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 40px 0;
				.coreshop-btn{
					background-image: linear-gradient(120deg, #54af53 0%, #84ca8d 100%);
					font-size: $uni-font-size-base;
					border-radius: 12px;
					padding: $uni-spacing-col-sm $uni-spacing-row-lg;
					margin-top: $uni-spacing-col-lg;
					width: fit-content;
					color: $uni-bg-color-grey;
				}
			}
			.comment-item{
				margin: $uni-spacing-col-base 0;
				.comment-userTop{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.user{
						display: flex;
						align-items: center;
						.userTop-info{
							padding: 0 $uni-spacing-row-base;
							.user-name{
								font-size: $uni-font-size-lg;
								color: $uni-text-color;
							}
							.user-time{
								font-size: $uni-font-size-sm;
								color: $uni-text-color-grey;
								padding: $uni-spacing-col-sm 0;
							}
						}
					}
					.userTop-focus{
						background-color: $gs-color-green;
						border-radius: $gs-border-radius-base;
						padding: $uni-spacing-col-sm $uni-spacing-row-lg;
						color: $uni-text-color-inverse;
						font-size: $uni-font-size-sm;
					}
				}
				.comment-center{
					padding: $uni-spacing-col-lg 0;
					.center-text{
						font-size: $uni-font-size-base;
						color: $uni-text-color;
						overflow: hidden;
						text-overflow: ellipsis;
						display:-webkit-box; // 将对象作为弹性伸缩盒子模型显示
						-webkit-box-orient:vertical; // 设置为垂直方向
						-webkit-line-clamp:3; // 显示两行
					}
					.center-img{
						display: grid;
						grid-template-columns: repeat(2,1fr);
						padding: $uni-spacing-col-sm 0;
					}
				}
				.comment-bottom{
					display: flex;
					align-items: center;
					justify-content: space-around;
					.good-left,.news-center,.relay-right{
						display: flex;
						align-items: center;
						.text{
							font-size: $uni-font-size-sm;
							color: $uni-text-color-placeholder;
							padding: 0 $uni-spacing-row-sm;
						}
					}
				}
			}
		}
		
		.review-item{
			border-radius: 20px 20px 0 0;
			background-color: #F7FFF5;
			padding: $uni-spacing-col-lg $uni-spacing-row-lg;
			.review-top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left-all{
					display: flex;
					align-items: center;
					.left-center{
						display: flex;
						flex-direction: column;
						padding: 0 $uni-spacing-row-base;
						.top-nickName{
							font-size: $uni-font-size-base;
							color: $uni-text-color-grey;
						}
						.center-review{
							font-size: $uni-font-size-base;
							color: $uni-text-color;
							padding: $uni-spacing-col-sm 0;
						}
						.btm-time{
							font-size: $uni-font-size-base;
							color: $uni-text-color-grey;
							.btm-reply{
								font-size: $uni-font-size-sm;
								color: $uni-color-primary;
								padding: 0 $uni-spacing-row-sm;
							}
						}
					}
					
				}
				.right-like{
					display: flex;
					flex-direction: column;
					align-items: center;
					.like-count{
						font-size: $uni-font-size-base;
						color: $uni-text-color-grey;
					}
				}
			}
			.review-reply{
				background-color: #EBF5E9;
				padding: $uni-spacing-col-base $uni-spacing-row-base;
				margin: $uni-spacing-col-base 0;
				.reply-top{
					display: flex;
					align-items: center;
					.reply-name{
						font-size: $uni-font-size-base;
						color: $uni-text-color-grey;
					}
					.reply-time{
						font-size: $uni-font-size-base;
						color: $uni-text-color-grey;
						padding: 0 $uni-spacing-row-sm;
					}
				}
				.reply-btm{
					font-size: $uni-font-size-base;
					color: $uni-text-color;
				}
			}
		}
		
		.add-comment{
			position: fixed;
			bottom: 20px;
			right: 25px;
			background-color: #88C987;
			padding: $uni-spacing-col-base;
			border-radius: $uni-border-radius-circle;
		}
	}
}